const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  // 配置入口和出口
  entry:  path.join(__dirname, './src/index.js'), // 要打包的入口文件
  output: {
    path: path.join(__dirname, './dist'),// 输出位置
    filename: 'boundle.js' // 指定输出文件名称
  },
  mode: 'development',
  plugins: [
    // 生成内存html文件模板
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), // 模板html文件
      filename: 'index.html' // 生成的内存文件模板
    }),
    new VueLoaderPlugin()
  ],
  module: {// 配置第三方模块加载器
    rules: [// 匹配规则，自上而下，先右后左
      // style loader
      { test: /\.css$/, use: ['style-loader', 'css-loader']},
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
      { test: /\.s[ac]ss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
      // url loader
      { test: /\.(jpg|jpeg|png|gif|bmp)$/, use: 'url-loader'}, // image file
      { test: /\.(eot|svg|ttf|woff|woff2)$/, use: 'url-loader'}, // font file
      // ES6+ 
      { test:/\.js$/, use: 'babel-loader', exclude: /node_modules/},
      //.vue组件
      { test:/\.vue$/, use: 'vue-loader'}
    ]
  },
  resolve: { // 设置导包解析路径
    alias: { 
      // "vue$": 'vue/dist/vue.js'
    }
  }
}